<template>
    <div class="head">
        <van-nav-bar title="景区列表" left-arrow @click-left="onClickLeft" />
    </div>
    <div style="width: 100%;height: 50px;"></div>

    <div class="all">
        <van-index-bar>
            <van-index-anchor v-for="(item, i) in dataList">
                {{ item.type }}
                <van-cell v-for="(items, j) in item.list" @click="jump(items.id)">
                    {{ items.name }}
                </van-cell>

            </van-index-anchor>

        </van-index-bar>
    </div>
</template>

<script setup>
import { IndexBar as vanIndexBar, Cell as vanCell, IndexAnchor as vanIndexAnchor } from 'vant';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ref, computed } from 'vue';
import pinyin from 'js-pinyin';
pinyin.setOptions({ charCase: 1 })
const dataList = ref([])
const scenicData = []
const router = useRouter()
axios({
    url: "/api/science/index", // url
    params: {
        // 参数
    },
})
    .then(function (res) {
        console.log(res); // 成功回调
        for (let index = 0; index < res.data.sciencelist.length; index++) {
            let obj = res.data.sciencelist[index];
            obj.pin = pinyin.getFullChars(obj.name)
            console.log(obj);
            scenicData.push(obj)
        }
        console.log(scenicData);
        filterCity(scenicData)
        dataList.value = filterCity(scenicData)
        console.log(dataList);
    })
    .catch(function (err) {
        console.log(err); // 失败回调
    });
const indexList = computed(() => {
    return dataList.value.map(item => item.type)
})
// 分组函数
const filterCity = (list) => {
    let letterArray = [];
    for (let i = 65; i < 91; i++) {
        letterArray.push(String.fromCharCode(i));
    }
    let newCities = []
    letterArray.forEach(item => {
        newCities.push({
            type: `${item}`,
            list: list.filter((val) => {
                return val.pin.slice(0, 1).toUpperCase() === `${item}`
            })
        })
    })
    newCities = newCities.filter(item => item.list.length)
    console.log(newCities);
    return newCities;
}
const onClickLeft = () => history.back();

function jump(id) { //跳转事件
    sessionStorage.setItem("sceniceId", id)
    router.push({
        path: '/',
    })
}
</script>

<style scoped>
.head {
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
}


.all {
    width: 100%;
    min-height: 100vh;
    padding-top: 46px;
    max-height: auto;
    background-color: rgb(241, 241, 241);
}
</style>